<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <div class="right-panel-search">
                    <div class="search-input">商品类别</div>
                    <el-select v-model="search.cate_id" @change="typeChange" filterable placeholder="请选择商品类别" clearable>
                        <el-option v-for="item in proType" :key="item.id" :label="item.title" :value="item.id" />
                    </el-select>
                    <div class="search-input">商品款式</div>
                    <el-select v-model="search.style_id" filterable placeholder="请选择商品类别" clearable>
                        <el-option v-for="item in styleList" :key="item.id" :label="item.title" :value="item.id" />
                    </el-select>
                    <el-input v-model="search.keyword" placeholder="工厂货号/SKC/SPU" clearable @change="handleKeyDown" />
                    <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
                    <el-select v-model="printArr" placeholder="请选择打印项目" @change="printChange" :disabled="selection.length == 0">
                        <el-option label="打印尺寸单" value="1"></el-option>
                        <el-option label="打印大货条码" value="2"></el-option>
                    </el-select>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border>
                <el-table-column type="selection"  align="center" width="50"></el-table-column>
                <el-table-column label="商品编码" prop="goods_code" align="center" width="150"></el-table-column>
                <el-table-column label="商品信息" prop="sample_clothing" align="center" >
                    <template #default="scope">
                        <div class="shopInfo">
                            <el-image class="img" :src="scope.row.goods_image" :preview-src-list="scope.row.goods_image_item" :initial-index="0" fit="cover" preview-teleported="true" hide-on-click-modal />
                            <div class="right">
                                <div>工厂货号：{{scope.row.factory_number}}</div>
                                <div>样衣尺码：{{scope.row.sample_size}}</div>
                                <!-- <div>SKC：{{scope.row.skc}}</div> -->
                                <div>颜色：{{scope.row.colour}}</div>
                                <div v-if="scope.row.sizeCate">商品类别：{{scope.row.sizeCate.title}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="主色/加色" prop="color_type" align="center" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.color_type==1" type="success">主色</el-tag>
                        <el-tag v-else type="danger">加色</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="客户名称 - 品牌 - SKC" prop="customList" align="center">
                    <template #default="scope">
                        <div class="shopInfo" style="justify-content: center;" v-for="item in scope.row.customList" :key="item.id">
                            <div>{{item.referred_as}} - {{item.brand_name}} - {{item.skc}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="成分" prop="component_name" align="center" width="180">
                    <template #default="{row}">
                        <div>{{row.component_name}} <span v-if="row.component_detail">+ {{row.component_detail}}</span></div>
                    </template>
                </el-table-column>
                <el-table-column label="样品克重" prop="sample_weight" align="center" width="150"></el-table-column>
                <el-table-column label="吓数" prop="scare_staff_name" align="center" width="150"></el-table-column>
                <el-table-column label="画花" prop="painted_staff_name" align="center" width="150"></el-table-column>
                <el-table-column label="操作" align="center" width="135">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction:column">
                            <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                            <el-button text type="primary" size="small" @click="openData(scope.row, scope.$index)" v-auth="'comInfo.downflower'">资料管理</el-button>
                            <el-button text type="primary" size="small" @click="table_print(scope.row, scope.$index)">打印尺寸单</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <print ref="printDialog"></print>
    <data-manage v-if="dialog.manage" ref="manageDialog" @success="handleSuccess" @closed="dialog.manage = false" draggable></data-manage>
    <app-save v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></app-save>
    <print-goods v-if="dialog.print" ref="printDialog" @success="handleSuccess" @closed="dialog.print = false" draggable></print-goods>
</template>

<script>
import print from '@/views/order/print.vue'
import DataManage from './dataManage.vue'
import AppSave from './appSave.vue'
import PrintGoods from '../comInfo/printGoods.vue'
export default {
	name: 'user',
	components: {
		DataManage,AppSave,print,PrintGoods
	},
	data() {
		return {
			dialog: {
				save: false,
                print:false,
                manage:false
			},
			group: [],
			apiObj: this.$API.customer.applyLists,
			selection: [],
			search: {
				cate_id: null,
				style_id: null,
				keyword: null,
			},
            printArr:'',
            proType:[], //商品类别
            styleList:[], //商品款式
            customerList:[],//客户
		}
	},
	mounted() {
        this.getType()
        this.getStyle()
        this.getKeHu()
	},
	methods: {
		//编辑
		table_edit(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row)
			})
		},
        // 打印
        async table_print(row){
            // var reqData = { id:row.id };
            // var res = await this.$API.print.goodsPrint.get(reqData);
            // if (res.code == 1) {
            //     this.$refs.printDialog.init(res.data);
            // } else {
            //     this.$alert(res.message, "提示", { type: "error" });
            // }
            var reqData = { ids: row.id };
            var res = await this.$API.print.goodsPrintAll.get(reqData);
			if (res.code == 1) {
                this.dialog.print = true;
                setTimeout(()=>{
                    this.$refs.printDialog.open("edit").setData(res.data.template_data);
                },500)
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
        },
        // 资料管理
        openData(row){
            this.dialog.manage = true
			this.$nextTick(() => {
				this.$refs.manageDialog.open('edit').setData(row)
			})
        },
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
            this.printArr = ''
		},
        async printChange(e){
            if(e==1){
                this.dialog.print = true
                let ids = []
                this.selection.map(item=>{
                    ids.push(item.id)
                })
                var reqData = { ids:ids };
                var res = await this.$API.print.goodsPrintAll.get(reqData);
                if (res.code == 1) {
                    // this.$refs.pitDialog.init(res.data);
                    this.dialog.print = true;
                    setTimeout(()=>{
                        this.$refs.printDialog.open("add").setData(res.data.template_data);
                    },500)
                    this.printArr = ''
                } else {
                    this.$alert(res.message, "提示", { type: "error" });
                }
            }
        },
        selectionChange(selection) {
			this.selection = selection;
		},
        // 商品类别
        async getType(){
            var res = await this.$API.all.type.get();
            this.proType = res.data;
        },
        // 商品款式
        async getStyle(){
            var res = await this.$API.goods.getAllGoodsStyle.get();
            this.styleList = res.data;
        },
        // 获取客户
        async getKeHu(){
            var res = await this.$API.all.customer.get();
            this.customerList = res.data;
        },
        handleKeyDown() {
            this.upsearch()
        },
	}
}
</script>

<style lang="scss">
.search-input {
	width: auto;
	font-size: 14px;
}
</style>
